<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>表 格 处 理</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="__STATIC__/assets/i/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="__STATIC__/assets/i/app-icon72x72@2x.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="__STATIC__/assets/i/app-icon72x72@2x.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="__STATIC__/assets/i/app-icon72x72@2x.png">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" href="__STATIC__/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="__STATIC__/assets/css/app.css">
    <style>
        .amz-banner {
            background: url() left top #f5f5f5;
            overflow-y: hidden;
            padding-top: 30px;
            padding-bottom: 30px;
        }
    </style>
</head>
<body>
<!--在这里编写你的代码-->
<div class="amz-banner">
    <div class="am-container am-scrollspy-init am-scrollspy-inview am-animation-scale-up" data-am-scrollspy="{animation: 'scale-up', repeat: false}">
        <p class="am-text-xxxl am-text-center"><i class="am-icon-line-chart"></i>&nbsp;表&nbsp;格&nbsp;处&nbsp;理</p>
        <!--<p>导入excel</p>-->
    </div>
</div>
<div class="index am-container">
    <div class="am-panel am-panel-success" style="margin-top: 20px;">
        <div class="am-panel-hd"><i class="am-icon-bookmark"></i> Step 1 </div>
        <div class="am-panel-bd">
            <p style="margin-left: 20px;margin-top: 10px;">请导入需要处理的Excel文件</p>
            <form action="{:url('excel/index/upload')}" method="post" enctype="multipart/form-data">
                <div class="am-form-group am-form-file" style="margin-left: 20px;margin-top: 10px;">
                    <input style="width: 234px;" id="excel-upload" name="excel-upload" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" multiple >
                    <button type="button" class="am-btn am-btn-default" >
                        <i class="am-icon-cloud-upload"></i> 选择需要上传的Excel文件
                    </button>
                </div>
                {$output}
                <input type="submit" value="上传Excel" class="am-btn am-btn-success" style="margin-left: 20px;margin-top: 10px;">
            </form>
        </div>
    </div>
    <div class="am-panel am-panel-success" style="margin-top: 20px;">
        <div class="am-panel-hd"><i class="am-icon-bookmark"></i> Step 2 </div>
        <div class="am-panel-bd">
            <p style="margin-left: 20px;margin-top: 10px;">请添加筛选条件以及对应的标识，多个条件请用英文半角逗号隔开</p>
            <form action="{:url('excel/index/check')}" method="post">
                <div class="am-form am-form-group" style="margin-left: 20px;margin-top: 10px;">
                    <div class="am-form-group">
                        <label>条件<span class="limit">1</span></label>
                        <div class="am-form-inline">
                            <div class="am-form-group am-form-success">
                                <input type="text" class="am-form-field am-radius" name="cond1" placeholder="筛选条件（用逗号隔开）" required>
                            </div>
                            <div class="am-form-group am-form-success">
                                <input type="text" class="am-form-field am-radius" name="identify1" placeholder="标识（如A、B、C）" required>
                            </div>
                        </div>
                    </div>
                    <div class="add-area">

                    </div>
                    <div class="btn-group">
                        <button type="button" id="add" class="am-btn am-btn-default"><i class="am-icon-plus"></i></button>
                        <button type="button" id="delete" class="am-btn am-btn-default"><i class="am-icon-minus"></i></button>
                    </div>

                    <div class="am-form-group" style="margin-top: 10px;">
                        <label>其他</label>
                        <div class="am-form-group am-form-success">
                            <input type="text" class="am-form-field am-radius" name="identify0" placeholder="标识（如A、B、C）" required>
                        </div>
                        <input class="am-btn am-btn-success" type="submit" value="确定">
                        <!--<button class="am-btn am-btn-danger" id="reset" type="button">重置</button>-->
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="am-panel am-panel-success" style="margin-top: 20px;">
        <div class="am-panel-hd"><i class="am-icon-bookmark"></i> Step 3 </div>
        <div class="am-panel-bd">
            <p style="margin-left: 20px;margin-top: 10px;">导出处理完的Excel</p>
            <div class="am-form-group am-form-file" style="margin-left: 20px;margin-top: 10px;">
                <input type="hidden" value="{$save_name}.{$file_type}">
                <button type="button" class="am-btn am-btn-default" >
                    <i class="am-icon-cloud-download"></i> 导出Excel文件</button>
                <input id="excel-download" type="file" multiple>
            </div>
        </div>
    </div>

</div>
<footer class="amz-footer" style="padding: 20px 0;background: #555;color: #999;margin-top: 20px">
    <div class="am-container">
        <p class="amz-cp">技术支持：<a href="http://hin.ckwl.org" target="_blank">Hin Trinh</a></p>
        <p class="amz-cp">© 2016 AllMobilize, Inc. Licensed under <a href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>. Developed with <a href="http://www.jetbrains.com/webstorm/" target="_blank">WebStorm</a>.</p>
    </div>
</footer>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="__STATIC__/assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="__STATIC__/assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="__STATIC__/assets/js/amazeui.min.js"></script>
<script type="application/javascript">
    $(document).ready(function(){
        var i = 2;
        var html1 = "<div class=\"limit-area am-form-group\">" +
            "<label>条件<span class=\"limit\">";
        var html2 = "</span></label>\n" +
            "                    <div class=\"am-form-inline\">\n" +
            "                        <div class=\"am-form-group am-form-success\">\n" +
            "                            <input type=\"text\" class=\"am-form-field am-radius\" name=\"cond";
        var html3 = "\" placeholder=\"筛选条件（用逗号隔开）\" required>\n" +
            "                        </div>\n" +
            "                        <div class=\"am-form-group am-form-success\">\n" +
            "                            <input type=\"text\" class=\"am-form-field am-radius\" name=\"identify";
        var html4 = "\" placeholder=\"标识（如A、B、C）\" required>\n" +
            "                        </div>\n" +
            "                    </div>" +
            "</div>";
        $("#add").click(function(){
            $(".add-area").append(html1+i+html2+i+html3+i+html4);
            i++;
        });
        $("#delete").click(function(){
            $(".limit-area:last").remove();
            i<=2 ? i=2 : i--;
        });
    });
</script>
</body>
</html>